<script lang="ts" setup>
import { showToast, type ActionSheetAction, type PickerOption } from 'vant'
import { onMounted, ref } from 'vue'
import b64toBlob from 'b64-to-blob'
import { request } from '@/api'
interface IPickerParams {
  selectedValues: string[]
  selectedOptions: {
    text: string
    value: string
  }[]
  selectedIndexes: number[]
}
const profile = ref({} as geekUser)
const Info = ref({
  name: profile.value.name,
  gender: profile.value.gender,
  intro: profile.value.intro,
  birthday: profile.value.birthday,
} as DataUser)
const showAbstractPopup = ref(false)
const showNickNamePopup = ref(false)
const showGenderPopup = ref(false)
const showAvatarSheet = ref(false)
const currentDate = ref(['1900', '01', '01'])
// 2. 选择生日日期
const showBirthdayPopup = ref(false)
onMounted(async () => {
  const user = geek.queryUser()
  console.log('00000')
  console.log(user)

  profile.value = await geek.getUser()
  profile.value.intro = (await geek.getInfo()).intro
  console.log(profile.value.intro)
  // currentDate.value = profile.value.birthday
  currentDate.value = profile.value.birthday.split('-')
  console.log(profile.value)
})
const selectDate = async (data: IPickerParams) => {
  profile.value.birthday = data.selectedValues.join('-')
  Info.value.birthday = profile.value.birthday

  await request.patch('user/profile', Info.value)
  geek.updateUser()
  showBirthdayPopup.value = false
}

// 1.2 打开相册/相机
const onSelectAvatar = async (item: ActionSheetAction, i: number) => {
  if (i === 0) {
    // 相册上传
    const base64str = await geek.pickerPhoto()
    console.log(base64str)
    const image = b64toBlob(base64str, 'image/jpeg')
    const fd = new FormData()
    fd.append('photo', image, Date.now() + '.jpeg')
    const res = await request.patch('user/photo', fd)

    profile.value.photo = res.data.data.photo
    showToast('上传成功')
  } else if (i === 1) {
    // 拍照上传
    console.log('拍照上传')
  }
}
const onSelectgender = async (item: ActionSheetAction, i: number) => {
  if (i === 0) {
    profile.value.gender = 0
    Info.value.gender = 0
    await request.patch('user/profile', Info.value)
    geek.updateUser()
  } else {
    profile.value.gender = 1
    Info.value.gender = 1
    await request.patch('user/profile', Info.value)
    geek.updateUser()
  }
  showGenderPopup.value = false
}
const setup = () => {
  const currentDate = ref(['2021', '01', '01'])
  const columnsType = ['year', 'month', 'day']

  const formatter = (type: string, option: PickerOption) => {
    if (type === 'year') {
      option.text += '年'
    }
    if (type === 'month') {
      option.text += '月'
    }
    if (type === 'day') {
      option.text += '日'
    }
    return option
  }

  return {
    formatter,
    currentDate,
    columnsType,
  }
}
const colseUser = () => {
  geek.closeUser()
}

const ShowGenderPopup = () => {
  console.log(showGenderPopup.value)
  showGenderPopup.value = true
}


const onClickLeft = () => {
  showAbstractPopup.value=false
}
const onClickRight = async () => {
  Info.value.intro = profile.value.intro
  await request.patch('user/profile', Info.value)
  geek.updateUser()
  showAbstractPopup.value = false
}
const onClickRightNickName=async()=>{
  Info.value.name = profile.value.name
  await request.patch('user/profile', Info.value)
  geek.updateUser()
  showNickNamePopup.value = false
}
const onClickLeftNickName=()=>{
  showNickNamePopup.value=false
}
</script>

<template>
  <div class="zdiv">
    <div></div>
    <div>
      <van-cell @click="showAvatarSheet = true" title="头像" is-link value-class="photo">
        <van-image round width="1.5rem" height="1.5rem" :src="profile.photo" />
      </van-cell>

      <van-action-sheet
        :close-on-click-action="true"
        v-model:show="showAvatarSheet"
        :actions="[{ name: '相册' }, { name: '拍照' }]"
        @select="onSelectAvatar"
        cancel-text="取消"
        :style="{ paddingBottom: '20px' }"
      />
      <van-cell title="昵称" is-link @click="showNickNamePopup = true">
        <span>{{ profile.name }}</span>
      </van-cell>
      <van-popup
        style="width: 100vw"
        position="right"
        is-link
        :value="profile.name"
        v-model:show="showNickNamePopup"
      >
        <div style="height: 100vh; ">
          <van-nav-bar
            title="昵称"
            left-text="返回"
            right-text="提交"
            left-arrow
            @click-left="onClickLeftNickName"
            @click-right="onClickRightNickName"
          />
          <van-cell-group inset>
            <van-field
              maxlength="12"
              label="昵称："
              v-model="profile.name"
              placeholder="请输入用户名"
            />
          </van-cell-group>
        </div>
      </van-popup>
      <van-cell title="简介" is-link @click="showAbstractPopup = true">
        <span>{{ profile.intro ?? '未填写' }}</span>
      </van-cell>
      <van-popup
        style="width: 100vw"
        position="right"
        title="简介"
        is-link
        v-model:show="showAbstractPopup"
      >
        <div style="height: 100vh; ">
          <van-nav-bar
            title="简介"
            left-text="返回"
            right-text="提交"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
          />

          <van-cell-group inset>
            <van-field
              maxlength="50"
              label="简介:"
              v-model="profile.intro"
              placeholder="请输入内容"
            />
          </van-cell-group>
        </div>
      </van-popup>
    </div>
    <van-divider :hairline="false" />
    <div>
      <van-cell
        @click="ShowGenderPopup"
        title="性别"
        v-model="profile.gender"
        class="gender"
        is-link
      >
        {{ profile.gender == 0 ? '男' : '女' }}
      </van-cell>

      <!-- <van-popup v-model:show="showGenderPopup" position="bottom" :style="{ height: '30%' }"> -->
      <van-action-sheet
        v-model:show="showGenderPopup"
        :actions="[{ name: '男' }, { name: '女' }]"
        @select="onSelectgender"
        cancel-text="取消"
      />
      <!-- </van-popup> -->

      <van-cell
        is-link
        @click="showBirthdayPopup = true"
        title="生日"
        readonly
        v-model="profile.birthday"
      >
        {{ profile.birthday }}
      </van-cell>
      <van-popup
        :safe-area-inset-bottom="true"
        title="选择时间"
        v-model:show="showBirthdayPopup"
        position="bottom"
      >
        <van-date-picker
          :formatter="setup().formatter"
          @cancel="showBirthdayPopup = false"
          @confirm="selectDate"
          v-model="currentDate"
          title="选择日期"
          :min-date="new Date('1900-01-01')"
          :max-date="new Date()"
        />
      </van-popup>
    </div>
  </div>

  <div class="button">
    <van-button @click="colseUser" color="#FD5741" size="large" type="default">退出登录</van-button>
  </div>
</template>

<style scoped>
.photo {
  width: 30px;
}
.gender ::v-deep(.van-cell__title) {
  width: 100px;
  flex: none;
}
.button {
  position: relative;
}
.zdiv {
  height: 180vw;
}
</style>
